<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="流程用户">
        <el-select
          v-model="queryParams.user"
          size="small"
          style="width: 240px" @change="handleUserChange">
          <el-option
            v-for="item in userOptions"
            :key="item.user"
            :label="item.userName"
            :value="item.user">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery(true)">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['plan:profile:month:detail:edit']"
        >修改
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange" row-key="boqCode"
              :default-expand-all="isExpandAll"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :height="tableHeight">
      <el-table-column type="selection" width="55" align="center" :selectable="checkSelectable"/>
      <el-table-column label="清单编码" align="left" prop="boqCode"/>
      <el-table-column label="清单名称" align="left" prop="boqName" show-overflow-tooltip/>
      <el-table-column label="单位" align="center" prop="unit" width="55"/>
      <el-table-column label="月工程量" align="center" prop="amount"/>
      <el-table-column label="月产值" align="center" prop="total"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-if="checkSelectable(scope.row)"
            v-hasPermi="['plan:profile:month:detail:edit']"
          >修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改月形象计划详情对话框 -->
    <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
        <el-form-item label="清单编号" prop="boqCode">
          <el-input v-model="form.boqCode" readonly/>
        </el-form-item>
        <el-form-item label="清单名称" prop="boqName">
          <el-input v-model="form.boqName" readonly/>
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-input v-model="form.unit" readonly/>
        </el-form-item>
        <el-form-item label="月工程量">
          <el-input v-model="form.amount" type="number" @keydown.native="handleKey" placeholder="请输入月工程量" clearable
                    :style="{width: '100%'}"/>
        </el-form-item>
        <el-form-item label="月产值">
          <el-input v-model="form.total" type="number" @keydown.native="handleKey" placeholder="请输入月产值" clearable
                    :style="{width: '100%'}"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

  import { detailList, getDetail, selectUserOptions, updateDetail } from "@/api/plan/profile/month";

  export default {
    name: "ProfileMonthDetail",
    data() {
      return {
        // 表格的高度
        tableHeight: document.documentElement.scrollHeight - 250 + "px",
        // 是否展开，默认全部折叠
        isExpandAll: true,
        // 不能编辑的原因
        // 1.该数据未锁定
        // 2.该数据的当前用户不等于登录用户
        // 3.选择用户不等于登录用户
        editFlag: true,
        // 主表状态
        status: null,
        // 当前登录用户
        loginUser: null,
        // 当前流程所在用户
        currentUser: null,
        // 选择用户
        selectUserName: null,
        // 用户下拉框
        userOptions: [],
        // 遮罩层
        loading: false,
        // 非单个禁用
        single: true,
        // 选中数组
        ids: [],
        // 表格数据
        list: [],
        total: 0,
        // 显示搜索条件
        showSearch: true,
        // 查询参数
        queryParams: {
          masterId: null,
          user: null,
          boqCode: null,
          boqName: null,
        },
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          amount: [
            {required: true, message: "月工程量不能为空", trigger: "blur" }
          ],
          total: [
            {required: true, message: "月产值不能为空", trigger: "blur" }
          ],
        },
        // 开始 截止 时间范围控制
        beginDatePickerOptions: {
          disabledDate: (time) => {
            if (this.form.endDate) {
              return time.getTime() > new Date(this.form.endDate).getTime();
            }
          }
        },
        endDatePickerOptions: {
          disabledDate: (time) => {
            if (this.form.beginDate) {
              return new Date(this.form.beginDate).getTime() > time.getTime();
            }
          }
        }
      }
    },
    created() {
      this.loginUser = this.$store.state.user.name;
      this.queryParams.masterId = this.$route.query.masterId;
      this.status = this.$route.query.status;
      this.selectUserOptions();
    },
    methods: {
      /** 加载月形象计划列表 */
      getList() {
        this.loading = true;
        detailList(this.queryParams).then(response => {
          this.list = this.handleTree(response.data, "boqCode", "parentCode");
          console.log(this.list);
          this.loading = false;
        });
      },
      /** 是否可以编辑 */
      checkSelectable(row) {
        let flag = this.editFlag;
        return flag && row.leafNode == 'Y';
      },
      /** 获取用户节点列表 */
      selectUserOptions() {
        selectUserOptions(this.queryParams.masterId).then(response => {
          this.currentUser = response.currentUser;
          if (this.loginUser != this.currentUser || this.status == '1') {
            this.editFlag = false;
          } else {
            this.editFlag = true;
          }
          this.queryParams.user = response.currentUser;
          this.userOptions = response.nodes;
          this.getList();
        });
      },
      // 用户下拉改变触发事件
      handleUserChange(val) {
        if (this.loginUser == this.currentUser && this.status == "0" && this.loginUser == val) {
          this.editFlag = true;
        } else {
          this.editFlag = false;
        }
        this.handleQuery();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          masterId: null,
          institutionBoqCode: null,
          boqCode: null,
          boqName: null,
          parentCode: null,
          ancestors: null,
          orderNum: null,
          level: null,
          leafNode: null,
          unit: null,
          amount: null,
          total: null,
          isEdit: null,
          dept: null,
          deptName: null,
          user: null,
          userName: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null
        };
        this.resetForm("form");
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      /** 修改月形象计划详情按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids;
        getDetail(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改月形象计划详情";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateDetail(this.form).then(response => {
                this.$modal.msgSuccess("操作成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      // 禁止输入e
      handleKey(e) {
        let key = e.key
        // 不允许输入'e'
        if (key === 'e') {
          e.returnValue = false
          return false
        }
        return true
      },
    }
  }

</script>
<style lang="scss">
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type='number'] {
    -moz-appearance: textfield;
  }
</style>
